<template>
  <div>
    <div class="form">
      <el-form :inline="true" :model="pagination" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="pagination.name"
            placeholder="按 用户名 查找"
            clearable
            @clear="pagination.name = null"
          />
        </el-form-item>
        <el-form-item label="板块">
          <el-select
            v-model="pagination.tag"
            placeholder="按 板块 查找"
            clearable
            @clear="pagination.tag = null"
          >
            <el-option v-for="tag in tags" :label="tag.name" :value="tag.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题">
          <el-input
            v-model="pagination.title"
            placeholder="按 标题 查找"
            clearable
            @clear="pagination.title = null"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="reloadData">开始查找</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      stripe
      border
    >
      <el-table-column label="头像" width="100">
        <template #default="scope">
          <el-image :src="scope.row.author.avatar" />
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="author.name" />
      <el-table-column label="发布板块">
        <template #default="scope">
          <el-tag>{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="帖子标题" prop="title" />
      <el-table-column label="帖子内容" prop="content" show-overflow-tooltip />
      <el-table-column label="浏览量" prop="viewCount" />
      <el-table-column label="发布时间" prop="publishTime" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="真的要删除吗?"
            @confirm="handleDelete(scope.row)"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.size"
      :page-sizes="[10, 50, 100, 200]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog v-model="editing" title="编辑">
      <el-form :model="editForm" label-position="right">
        <el-form-item label="帖子板块" label-width="140px">
          <el-select v-model="editForm.tag" placeholder="请选择板块">
            <el-option v-for="tag in tags" :label="tag.name" :value="tag.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="帖子标题" label-width="140px">
          <el-input v-model="editForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="帖子内容" label-width="140px">
          <x-edit ref="xEditRef"></x-edit>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="editing = false">取消</el-button>
          <el-button type="primary" @click="handleUpdateInfo"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { listPosts, listTags, updatePost, deletePost } from "@/api/adminAPI";
import { ElMessage } from "element-plus";

const pagination = reactive({
  page: 1,
  size: 10,
  total: 20,
});
const tableData = ref();
const editing = ref(false);
const editForm = ref({});
const tags = ref();
const xEditRef = ref();

listTags().then(({ data }) => {
  tags.value = data.data;
});
const reloadData = () => {
  listPosts(pagination).then(({ data }) => {
    pagination.page = data.page;
    pagination.size = data.size;
    pagination.total = data.total;
    tableData.value = data.data;
  });
};

const handleSizeChange = (val) => {
  pagination.size = val;
  reloadData();
};
const handleCurrentChange = (val) => {
  pagination.page = val;
  reloadData();
};

const handleEdit = (row) => {
  editing.value = true;
  editForm.value = row;
  // xEditRef 的初始化时间有点慢, 所以这里要等它一下
  setTimeout(() => {
    xEditRef.value.setHtml(row.content);
  }, 500);
};
const handleDelete = (row) => {
  deletePost(row.id).then((data) => {
    ElMessage.success(data.message);
    window.location.reload();
  });
};
const handleUpdateInfo = () => {
  editing.value = false;
  // 因为 content 的编辑交给了 富文本编辑器, 所以这里需要手动设置下 content 的值
  editForm.value.content = xEditRef.value.getHtml();
  updatePost(editForm.value).then((data) => {
    ElMessage.success(data.message);
    window.location.reload();
  });
};
reloadData();
</script>

<style scoped>
.pagination {
  margin-top: 20px;
}
.form {
  display: flex;
  margin-bottom: 10px;
}
</style>
